<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #conter {
            width: 1000px;
            margin: 0 auto;
            margin-top: 30px;
        }
        #conter #photo {
            width: 880px;
            margin: 0 auto;
            background: antiquewhite;
        }
        #conter #photo img {
            width: 400px;
            height: 250px;
            padding: 5px;
            margin-bottom: 5px;
            margin-left: 25px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <main id="conter">
        <div id="photo">
            <img src="./image/loading.gif" data-src="./image/ad01.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad02.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad03.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad04.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad05.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad06.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad01.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad02.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad03.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad04.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad05.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad06.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad01.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad02.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad03.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad04.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad05.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad06.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad01.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad02.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad03.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad04.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad05.jpg" alt="">
            <img src="./image/loading.gif" data-src="./image/ad06.jpg" alt="">
        </div>
    </main>
    <script>
        function throttle(fn,delay,atleast){
            var timeout=null;
            startTime=new Date();
            return function(){
                var curTime=new Date();
                clearTimeout(timeout);
                if(curTime-startTime>=atleast){
                    fn();
                    startTime=curTime;
                }else{
                    timeout=setTimeout(fn,delay);
                }
            }
        }
        function lazyload(){
            var images=document.getElementsByTagName("img");
            var len=images.length;
            // 存储图片加载到的位置，避免每次都从第一张图片开始遍历
            var n=0;
            return function(){
                var seeHeight=document.documentElement.clientHeight;
                var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                for(var i=0;i<len;i++){
                    console.log(images[i].offsetTop);
                    console.log(seeHeight);
                    console.log(scrollTop);
                    if(images[i].offsetTop < seeHeight+scrollTop){
                        if(images[i].getAttribute("src") ==="./image/loading.gif"){
                            images[i].src=images[i].getAttribute("data-src");

                        }
                        n=n+1;
                    }
                }
            }
        }
        var loadImages=lazyload();
        // 初始化首页图片
        loadImages();
        window.addEventListener("scroll",throttle(lazyload(),2000,3000),false);
    </script>

    <script src="./js/jquery-1.12.4.js"></script>
</body>
</html>